<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeCraft - 你的数字工具创作空间</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6', // 主色调：亮蓝色（技术感+亲和力）
            python: '#3776AB',
            java: '#007396',
            mysql: '#00758F',
            excel: '#217346',
            web: '#F06292',
            neutral: '#F8FAFC',
            dark: '#1E293B',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-gradient {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }
      .user-card-hover {
        transition: all 0.3s ease;
      }
      .user-card-hover:hover {
        transform: translateY(-5px);
      }
    }
  </style>
</head>

<body class="bg-white text-dark">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo -->
      <a href="#" class="flex items-center gap-2">
        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-blue-400 flex items-center justify-center">
          <i class="fa fa-cube text-white text-xl"></i>
        </div>
        <span class="text-xl font-bold bg-gradient-to-r from-primary to-blue-500 text-gradient">CodeCraft</span>
      </a>
      
      <!-- 导航菜单 - 桌面端 -->
      <nav class="hidden md:flex items-center gap-8">
        <a href="#" class="font-medium text-primary border-b-2 border-primary pb-1">我的工作台</a>
        <a href="#tech" class="font-medium hover:text-primary transition-colors">技术工具库</a>
        <a href="#growth" class="font-medium hover:text-primary transition-colors">我的成长</a>
        <a href="#community" class="font-medium hover:text-primary transition-colors">创作者社区</a>
      </nav>
      
      <!-- 登录/注册按钮 -->
      <div class="flex items-center gap-4">
        <a href="#login" class="hidden md:flex items-center gap-2 px-4 py-2 text-primary border border-primary rounded-lg hover:bg-primary/5 transition-colors">
          <i class="fa fa-user-circle-o"></i> 登录
        </a>
        <a href="#register" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg">
          免费创建空间
        </a>
        
        <!-- 移动端菜单按钮 -->
        <button id="menuBtn" class="md:hidden text-dark text-xl">
          <i class="fa fa-bars"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobileMenu" class="md:hidden hidden bg-white border-t">
      <div class="container mx-auto px-4 py-3 flex flex-col gap-3">
        <a href="#" class="py-2 font-medium text-primary">我的工作台</a>
        <a href="#tech" class="py-2 font-medium hover:text-primary">技术工具库</a>
        <a href="#growth" class="py-2 font-medium hover:text-primary">我的成长</a>
        <a href="#community" class="py-2 font-medium hover:text-primary">创作者社区</a>
        <a href="#login" class="py-2 font-medium hover:text-primary">登录</a>
      </div>
    </div>
  </header>

  <main>
    <!-- 1. 个人工作台入口区 - 核心调整点 -->
    <section class="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-br from-blue-50 to-indigo-50">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center gap-10">
          <!-- 文字内容 - 完全以用户为中心 -->
          <div class="md:w-1/2 space-y-6">
            <h5 class="text-primary font-medium">你的数字工具创作空间</h5>
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight">
              在这里，构建<br>
              <span class="bg-gradient-to-r from-python to-primary text-gradient">属于你的技术工具箱</span>
            </h1>
            <p class="text-lg text-gray-600 max-w-lg">
              从学习Python开始，积累你的专属工具库。无论是现在学习、未来工作，还是创业项目，这里都是你技术成长的终身工作台。
            </p>
            <div class="flex flex-wrap gap-4 pt-4">
              <a href="#start" class="px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all shadow-lg hover:shadow-xl">
                开启我的工作台 <i class="fa fa-rocket ml-2"></i>
              </a>
              <a href="#showcase" class="px-8 py-3 bg-white text-primary border border-primary rounded-lg hover:bg-primary/5 transition-all">
                看看别人的作品
              </a>
            </div>
            
            <!-- 用户进度展示 - 增强归属感 -->
            <div class="pt-6 bg-white/80 backdrop-blur-sm p-4 rounded-xl border border-gray-100">
              <div class="flex items-center justify-between mb-2">
                <span class="font-medium">加入后你可以</span>
                <span class="text-sm text-primary">已有3,281人正在使用</span>
              </div>
              <div class="flex gap-3 text-sm text-gray-600">
                <div class="flex items-center gap-1"><i class="fa fa-check-circle text-green-500"></i> 保存工具</div>
                <div class="flex items-center gap-1"><i class="fa fa-check-circle text-green-500"></i> 记录学习</div>
                <div class="flex items-center gap-1"><i class="fa fa-check-circle text-green-500"></i> 发布作品</div>
              </div>
            </div>
          </div>
          
          <!-- 工作台界面预览 - 具象化个人空间 -->
          <div class="md:w-1/2 relative">
            <div class="absolute -top-5 -left-5 w-20 h-20 bg-python/10 rounded-full"></div>
            <div class="absolute -bottom-5 -right-5 w-32 h-32 bg-web/10 rounded-full"></div>
            <div class="relative z-10 bg-white rounded-xl shadow-2xl overflow-hidden border border-gray-100">
              <!-- 模拟工作台界面 -->
              <div class="bg-gray-50 px-4 py-2 border-b border-gray-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <div class="w-3 h-3 rounded-full bg-red-400"></div>
                  <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
                  <div class="w-3 h-3 rounded-full bg-green-400"></div>
                  <span class="text-sm text-gray-500">我的工作台</span>
                </div>
                <div class="text-gray-400 text-sm">
                  <i class="fa fa-ellipsis-v"></i>
                </div>
              </div>
              <img src="https://picsum.photos/id/0/600/400" alt="个人工作台预览" class="w-full object-cover h-[300px] md:h-[400px]">
              <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                <div class="text-white font-medium">张小明的工具库</div>
                <div class="text-white/80 text-sm">12个工具 · 3个学习项目 · 2个发布作品</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 2. 成长路径区 - 展示长期价值 -->
    <section id="growth" class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">你的技术成长路线图</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">从入门到精通，从学习到变现，在这里完成你的技术进阶</p>
        </div>
        
        <!-- 成长阶段时间线 -->
        <div class="max-w-4xl mx-auto relative">
          <!-- 中轴线 -->
          <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-primary/10 rounded-full"></div>
          
          <div class="space-y-16 relative">
            <!-- 阶段1：入门学习 -->
            <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
                <h3 class="text-xl font-bold mb-2">入门学习</h3>
                <p class="text-gray-600">获取Python基础教程，完成第一个小工具开发，建立技术自信</p>
                <div class="mt-3 inline-block md:float-right">
                  <span class="bg-green-100 text-green-700 text-xs px-3 py-1 rounded-full">适合新手</span>
                </div>
              </div>
              
              <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center z-10">
                <i class="fa fa-graduation-cap"></i>
              </div>
              
              <div class="md:w-1/2 md:pl-12">
                <div class="bg-neutral p-4 rounded-lg">
                  <div class="flex items-center gap-2 mb-2">
                    <i class="fa fa-check-circle text-green-500"></i>
                    <span class="font-medium">你将获得</span>
                  </div>
                  <ul class="text-sm text-gray-600 space-y-1">
                    <li>• 30天Python入门计划</li>
                    <li>• 5个实战小工具源码</li>
                    <li>• 学习进度跟踪表</li>
                  </ul>
                </div>
              </div>
            </div>
            
            <!-- 阶段2：技能提升 -->
            <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
                <div class="bg-neutral p-4 rounded-lg">
                  <div class="flex md:justify-end items-center gap-2 mb-2">
                    <span class="font-medium">你将获得</span>
                    <i class="fa fa-check-circle text-green-500"></i>
                  </div>
                  <ul class="text-sm text-gray-600 space-y-1 md:text-right">
                    <li>• 进阶领域专项课程</li>
                    <li>• 可复用的代码模块库</li>
                    <li>• 技能评估与提升建议</li>
                  </ul>
                </div>
              </div>
              
              <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center z-10">
                <i class="fa fa-cogs"></i>
              </div>
              
              <div class="md:w-1/2 md:pl-12">
                <h3 class="text-xl font-bold mb-2">技能提升</h3>
                <p class="text-gray-600">深入学习Python进阶知识，掌握自动化、数据分析等实用技能</p>
                <div class="mt-3">
                  <span class="bg-blue-100 text-blue-700 text-xs px-3 py-1 rounded-full">适合进阶学习者</span>
                </div>
              </div>
            </div>
            
            <!-- 阶段3：职场应用 -->
            <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
                <h3 class="text-xl font-bold mb-2">职场应用</h3>
                <p class="text-gray-600">开发提升工作效率的工具，解决实际业务问题，成为职场效率达人</p>
                <div class="mt-3 inline-block md:float-right">
                  <span class="bg-purple-100 text-purple-700 text-xs px-3 py-1 rounded-full">适合职场人士</span>
                </div>
              </div>
              
              <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center z-10">
                <i class="fa fa-briefcase"></i>
              </div>
              
              <div class="md:w-1/2 md:pl-12">
                <div class="bg-neutral p-4 rounded-lg">
                  <div class="flex items-center gap-2 mb-2">
                    <i class="fa fa-check-circle text-green-500"></i>
                    <span class="font-medium">你将获得</span>
                  </div>
                  <ul class="text-sm text-gray-600 space-y-1">
                    <li>• 职场场景解决方案</li>
                    <li>• 可定制的工具模板</li>
                    <li>• 效率提升案例参考</li>
                  </ul>
                </div>
              </div>
            </div>
            
            <!-- 阶段4：创意变现 -->
            <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
                <div class="bg-neutral p-4 rounded-lg">
                  <div class="flex md:justify-end items-center gap-2 mb-2">
                    <span class="font-medium">你将获得</span>
                    <i class="fa fa-check-circle text-green-500"></i>
                  </div>
                  <ul class="text-sm text-gray-600 space-y-1 md:text-right">
                    <li>• 工具商业化指南</li>
                    <li>• 需求对接平台</li>
                    <li>• 创作者收益体系</li>
                  </ul>
                </div>
              </div>
              
              <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center z-10">
                <i class="fa fa-lightbulb-o"></i>
              </div>
              
              <div class="md:w-1/2 md:pl-12">
                <h3 class="text-xl font-bold mb-2">创意变现</h3>
                <p class="text-gray-600">将你的工具创意转化为产品，通过平台获得收益，实现技术变现</p>
                <div class="mt-3">
                  <span class="bg-amber-100 text-amber-700 text-xs px-3 py-1 rounded-full">适合创作者</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 3. 技术工具库 - 关联用户需求 -->
    <section id="tech" class="py-16 bg-neutral">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">你的技术工具库</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">从Python开始，逐步积累多领域工具，打造专属你的技术兵器库</p>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
          <!-- 核心领域：Python -->
          <div class="bg-white rounded-2xl p-6 border-2 border-python/30 flex flex-col items-center text-center shadow-md hover:shadow-lg transition-all duration-300">
            <div class="w-16 h-16 bg-python/10 rounded-full flex items-center justify-center mb-4">
              <i class="fa fa-python text-python text-2xl"></i>
            </div>
            <h3 class="font-bold text-lg mb-1">Python工具集</h3>
            <p class="text-sm text-gray-500">已收录32个工具</p>
            <button class="mt-4 text-xs bg-python/10 text-python px-3 py-1 rounded-full hover:bg-python/20 transition-colors">
              加入我的库
            </button>
          </div>
          
          <!-- 扩展领域：Java -->
          <div class="bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center hover:border-java/20 hover:shadow-md transition-all duration-300">
            <div class="w-16 h-16 bg-java/10 rounded-full flex items-center justify-center mb-4">
              <i class="fa fa-coffee text-java text-2xl"></i>
            </div>
            <h3 class="font-bold text-lg mb-1">Java工具集</h3>
            <p class="text-sm text-gray-500">12个工具（扩展中）</p>
            <button class="mt-4 text-xs bg-gray-100 text-gray-500 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors">
              收藏待更新
            </button>
          </div>
          
          <!-- 扩展领域：MySQL -->
          <div class="bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center hover:border-mysql/20 hover:shadow-md transition-all duration-300">
            <div class="w-16 h-16 bg-mysql/10 rounded-full flex items-center justify-center mb-4">
              <i class="fa fa-database text-mysql text-2xl"></i>
            </div>
            <h3 class="font-bold text-lg mb-1">MySQL工具集</h3>
            <p class="text-sm text-gray-500">8个工具（扩展中）</p>
            <button class="mt-4 text-xs bg-gray-100 text-gray-500 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors">
              收藏待更新
            </button>
          </div>
          
          <!-- 扩展领域：Excel -->
          <div class="bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center hover:border-excel/20 hover:shadow-md transition-all duration-300">
            <div class="w-16 h-16 bg-excel/10 rounded-full flex items-center justify-center mb-4">
              <i class="fa fa-table text-excel text-2xl"></i>
            </div>
            <h3 class="font-bold text-lg mb-1">Excel工具集</h3>
            <p class="text-sm text-gray-500">15个工具（扩展中）</p>
            <button class="mt-4 text-xs bg-gray-100 text-gray-500 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors">
              收藏待更新
            </button>
          </div>
          
          <!-- 扩展领域：前端开发 -->
          <div class="bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center hover:border-web/20 hover:shadow-md transition-all duration-300">
            <div class="w-16 h-16 bg-web/10 rounded-full flex items-center justify-center mb-4">
              <i class="fa fa-code text-web text-2xl"></i>
            </div>
            <h3 class="font-bold text-lg mb-1">前端工具集</h3>
            <p class="text-sm text-gray-500">7个工具（扩展中）</p>
            <button class="mt-4 text-xs bg-gray-100 text-gray-500 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors">
              收藏待更新
            </button>
          </div>
        </div>
        
        <!-- 个性化推荐工具 -->
        <div class="mt-16">
          <div class="flex justify-between items-center mb-8">
            <h3 class="text-2xl font-bold">为你推荐的工具</h3>
            <a href="#" class="text-primary font-medium hover:underline">查看全部</a>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- 工具1 -->
            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100">
              <div class="flex justify-between items-start mb-4">
                <div class="flex items-center gap-2">
                  <div class="w-10 h-10 bg-python/10 rounded-lg flex items-center justify-center">
                    <i class="fa fa-file-excel-o text-python"></i>
                  </div>
                  <h4 class="font-bold">Excel批量处理助手</h4>
                </div>
                <button class="text-gray-400 hover:text-primary transition-colors">
                  <i class="fa fa-star-o"></i>
                </button>
              </div>
              <p class="text-gray-600 text-sm mb-4">一键处理重复数据、格式统一、生成报表，提升80%工作效率</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center gap-1 text-amber-500 text-sm">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star-half-o"></i>
                  <span class="text-gray-500 ml-1">4.5 (128)</span>
                </div>
                <button class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-lg hover:bg-primary/20 transition-colors">
                  保存到我的库
                </button>
              </div>
            </div>
            
            <!-- 工具2 -->
            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100">
              <div class="flex justify-between items-start mb-4">
                <div class="flex items-center gap-2">
                  <div class="w-10 h-10 bg-python/10 rounded-lg flex items-center justify-center">
                    <i class="fa fa-scissors text-python"></i>
                  </div>
                  <h4 class="font-bold">文本处理工具箱</h4>
                </div>
                <button class="text-gray-400 hover:text-primary transition-colors">
                  <i class="fa fa-star-o"></i>
                </button>
              </div>
              <p class="text-gray-600 text-sm mb-4">批量提取、替换、格式化文本内容，支持多种规则自定义</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center gap-1 text-amber-500 text-sm">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star-o"></i>
                  <span class="text-gray-500 ml-1">4.0 (96)</span>
                </div>
                <button class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-lg hover:bg-primary/20 transition-colors">
                  保存到我的库
                </button>
              </div>
            </div>
            
            <!-- 工具3 -->
            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100">
              <div class="flex justify-between items-start mb-4">
                <div class="flex items-center gap-2">
                  <div class="w-10 h-10 bg-python/10 rounded-lg flex items-center justify-center">
                    <i class="fa fa-download text-python"></i>
                  </div>
                  <h4 class="font-bold">网络资源下载器</h4>
                </div>
                <button class="text-gray-400 hover:text-primary transition-colors">
                  <i class="fa fa-star-o"></i>
                </button>
              </div>
              <p class="text-gray-600 text-sm mb-4">一键下载图片、视频、文档，支持批量操作和自动分类</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center gap-1 text-amber-500 text-sm">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <span class="text-gray-500 ml-1">5.0 (156)</span>
                </div>
                <button class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-lg hover:bg-primary/20 transition-colors">
                  保存到我的库
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 4. 社区展示区 - 增强归属感 -->
    <section id="community" class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">创作者社区</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">看看其他人如何使用平台成长，找到志同道合的伙伴</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- 用户故事1 -->
          <div class="bg-neutral rounded-xl p-6 user-card-hover">
            <div class="flex items-center gap-4 mb-6">
              <img src="https://picsum.photos/id/1005/60/60" alt="用户头像" class="w-12 h-12 rounded-full">
              <div>
                <h4 class="font-bold">李会计</h4>
                <p class="text-sm text-gray-500">某贸易公司 · 入职1年</p>
              </div>
            </div>
            <p class="text-gray-600 mb-4">
              "用平台的Python工具处理报表，每天节省2小时，现在有更多时间学习数据分析，已经获得领导赏识啦！"
            </p>
            <div class="bg-white p-3 rounded-lg border border-gray-100">
              <div class="text-sm font-medium mb-1">她的工具库</div>
              <div class="flex flex-wrap gap-2">
                <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">Excel批量处理</span>
                <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">数据可视化</span>
                <span class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded">PDF处理</span>
              </div>
            </div>
          </div>
          
          <!-- 用户故事2 -->
          <div class="bg-neutral rounded-xl p-6 user-card-hover">
            <div class="flex items-center gap-4 mb-6">
              <img src="https://picsum.photos/id/1012/60/60" alt="用户头像" class="w-12 h-12 rounded-full">
              <div>
                <h4 class="font-bold">王经理</h4>
                <p class="text-sm text-gray-500">销售团队 · 3年经验</p>
              </div>
            </div>
            <p class="text-gray-600 mb-4">
              "从零基础开始学Python，用平台教程开发了客户管理工具，团队跟进效率提升40%，现在正在学习MySQL扩展功能。"
            </p>
            <div class="bg-white p-3 rounded-lg border border-gray-100">
              <div class="text-sm font-medium mb-1">他的工具库</div>
              <div class="flex flex-wrap gap-2">
                <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">客户管理系统</span>
                <span class="text-xs bg-orange-100 text-orange-700 px-2 py-1 rounded">销售报表</span>
                <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">数据备份工具</span>
              </div>
            </div>
          </div>
          
          <!-- 用户故事3 -->
          <div class="bg-neutral rounded-xl p-6 user-card-hover">
            <div class="flex items-center gap-4 mb-6">
              <img src="https://picsum.photos/id/1025/60/60" alt="用户头像" class="w-12 h-12 rounded-full">
              <div>
                <h4 class="font-bold">张同学</h4>
                <p class="text-sm text-gray-500">计算机专业 · 大三</p>
              </div>
            </div>
            <p class="text-gray-600 mb-4">
              "在平台学习Python开发，现在能接一些小项目了！上个月靠开发的自动化工具赚了3000元，够我两个月生活费了～"
            </p>
            <div class="bg-white p-3 rounded-lg border border-gray-100">
              <div class="text-sm font-medium mb-1">他的工具库</div>
              <div class="flex flex-wrap gap-2">
                <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">爬虫工具箱</span>
                <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">自动化脚本</span>
                <span class="text-xs bg-red-100 text-red-700 px-2 py-1 rounded">文件处理工具</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 5. 行动召唤区 - 强化个人价值 -->
    <section id="start" class="py-20 bg-gradient-to-r from-primary to-blue-600">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-6">
          开始构建你的技术工具箱
        </h2>
        <p class="text-white/80 max-w-2xl mx-auto mb-10 text-lg">
          注册后即可获得3个实用工具和7天会员体验，记录你的学习历程，积累你的专属工具库
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <a href="#register" class="px-8 py-4 bg-white text-primary rounded-lg font-medium hover:bg-gray-100 transition-colors shadow-lg">
            创建我的工作台
          </a>
          <a href="#showcase" class="px-8 py-4 bg-transparent text-white border border-white rounded-lg font-medium hover:bg-white/10 transition-colors">
            查看使用教程
          </a>
        </div>
        
        <!-- 进度展示 - 增强参与感 -->
        <div class="mt-12 max-w-2xl mx-auto bg-white/10 backdrop-blur-sm rounded-xl p-6">
          <div class="flex justify-between items-center mb-4">
            <span class="text-white font-medium">今日已有 237 人加入</span>
            <span class="text-white/80 text-sm">累计用户: 3,281</span>
          </div>
          <div class="h-2 bg-white/20 rounded-full overflow-hidden">
            <div class="h-full bg-white rounded-full" style="width: 78%"></div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white/70 py-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
        <div>
          <div class="flex items-center gap-2 mb-4">
            <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
              <i class="fa fa-cube text-primary text-xl"></i>
            </div>
            <span class="text-xl font-bold text-white">CodeCraft</span>
          </div>
          <p class="text-sm">
            你的终身技术工作台，从学习到变现，陪伴你的整个技术成长之路
          </p>
        </div>
        
        <div>
          <h4 class="text-white font-bold mb-4">我的工作台</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">工具库</a></li>
            <li><a href="#" class="hover:text-white transition-colors">学习记录</a></li>
            <li><a href="#" class="hover:text-white transition-colors">我的作品</a></li>
            <li><a href="#" class="hover:text-white transition-colors">成长数据</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-white font-bold mb-4">平台资源</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">技术教程</a></li>
            <li><a href="#" class="hover:text-white transition-colors">工具市场</a></li>
            <li><a href="#" class="hover:text-white transition-colors">需求对接</a></li>
            <li><a href="#" class="hover:text-white transition-colors">会员权益</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-white font-bold mb-4">加入社区</h4>
          <ul class="space-y-2 text-sm">
            <li class="flex items-center gap-2">
              <i class="fa fa-weixin"></i>
              <span>CodeCraft创作者</span>
            </li>
            <li class="flex items-center gap-2">
              <i class="fa fa-github"></i>
              <span>GitHub组织</span>
            </li>
            <li class="flex items-center gap-2">
              <i class="fa fa-qq"></i>
              <span>交流群: 123456</span>
            </li>
          </ul>
          <div class="mt-4">
            <img src="https://picsum.photos/id/237/80/80" alt="微信交流群" class="w-20 h-20 rounded">
          </div>
        </div>
      </div>
      
      <div class="border-t border-white/10 pt-8 text-sm text-center">
        <p>© 2023 CodeCraft 版权所有 | 你的数字工具创作空间</p>
      </div>
    </div>
  </footer>

  <!-- 交互脚本 -->
  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        navbar.classList.add('py-2', 'shadow');
        navbar.classList.remove('py-3');
      } else {
        navbar.classList.add('py-3');
        navbar.classList.remove('py-2', 'shadow');
      }
    });
    
    // 移动端菜单切换
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    menuBtn.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      menuBtn.innerHTML = mobileMenu.classList.contains('hidden') 
        ? '<i class="fa fa-bars"></i>' 
        : '<i class="fa fa-times"></i>';
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;
        
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
          
          // 关闭移动端菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
            menuBtn.innerHTML = '<i class="fa fa-bars"></i>';
          }
        }
      });
    });
  </script>
</body>
</html>
